<template>
  <div class="app-container">
    <div class="el-upload__tip">只能上传excel文件</div>
    <el-upload
      accept=".xlsx"
      class="upload-demo"
      :on-success="uploadSuccess"
      drag
      :action="BASE_API+'/edu/subject/importSubject'"
      :multiplf="false">
      <i class="el-icon-upload"/>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-button size="small" type="primary"><a href="static/excel/default.xlsx">下载模板</a></el-button>
    <div slot="tip" class="el-upload__tip">提交数据范例！</div>
    <el-dialog
      title="导入成功"
      :visible.sync="dialogVisible"
      width="30%"
      @before-close="dialogVisible = false">
      <div>插入成功：{{ data.sucCount }}</div>
      <div>&nbsp;&nbsp;&nbsp;一级科目：{{ data.oneSucCount }}</div>
      <div>&nbsp;&nbsp;&nbsp;二级科目：{{ data.twoSucCount }}</div>
      <br/>
      <div>重复科目：{{ data.reCount }}</div>
      <div>&nbsp;&nbsp;&nbsp;一级科目：{{ data.oneReCount }}</div>
      <div>&nbsp;&nbsp;&nbsp;二级科目：{{ data.twoReCount }}</div>
      <br/>
      <div>空行：{{ data.nullRow }}</div>
      <br/>
      <div>空列：{{ data.nullCell }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "import",
  data() {
    return {
      // 获取配置文件dev中的配置信息
      BASE_API: process.env.BASE_API,
      // 弹窗状态
      dialogVisible: false,
      // 导入完成的数据
      data: {
        sucCount: 0,
        oneSucCount: 0,
        twoSucCount: 0,
        reCount: 0,
        oneReCount: 0,
        twoReCount: 0,
        nullRow: 0,
        nullCell: 0
      }
    }
  },
  methods: {
    // 上传成功
    uploadSuccess(data) {
      console.log(data)
      this.data = data.data
      if (data.code === 20000) {
        this.dialogVisible = true
      } else {
        this.$message.error("上传失败了！")
      }
    }
  },
  created() {
  },
}
</script>
